page {
	background-color: #F6F6F6;
	height: 100%;
	width: 100%;
}

.content {
	position: relative;
	min-height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.bg-img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.box {
		background: #F9E5A1;
		box-shadow: 0 8rpx 14rpx 5rpx rgba(165, 79, 49, 0.68), inset 0 2rpx 0 0 rgba(255, 255, 255, 0.74), inset 0 -2rpx 1rpx 0 #E29F45;
		border-radius: 20rpx;
	}

	.top-view {
		position: relative;
		margin-top: 40rpx;
		width: 100%;

		.top-box-bg {
			position: absolute;
			 left: 0;
			  top: 0;
			 width: 100%;
			height: 150rpx;
		}

		.topBox {
			margin: 20rpx 20rpx 0 20rpx;
			 min-height: 170rpx;
			  width: 710rpx;
			   display: flex;
			    align-items: center; // padding 32rpx

			.box-content {
				background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
				border: 2rpx solid #E8A974;
				border-radius: 12rpx;

				width: 570rpx; padding: 26rpx; padding-top: 50rpx; margin: 20rpx;>text {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #844425;
					letter-spacing: 0;
					line-height: 36rpx;
				}
			}
		}

		.show-icon {
			width: 150rpx;
			height: 196rpx;
			position :absolute;
			right :20rpx ;bottom :0rpx;
		}

		.box-border {
			position: absolute;
			width: 203rpx; // top -50rpx
			top: -25rpx; left: 50%; transform: translateX(-50%); background: #F9E5A1;
			box-shadow: 0 7rpx 9rpx 0 rgba(165, 79, 49, 0.68);
			border-radius: 42rpx;

			.top-box-view {
				margin: 13rpx; width :177rpx; height :58rpx; background: #C6784A;
				box-shadow: 0 1rpx 1rpx 0 #F8BC93, inset 0 6rpx 0 0 rgba(132, 68, 37, 0.51);
				border-radius: 29rpx;

				display :flex ;align-items: center ;justify-content :flex-start;>image {
					width :48rpx; height: 48rpx;
					display: block; margin: 0 20rpx;
				}

				>text {
					font-family: FZY4K--GBK1-0;
					font-size: 30rpx;
					color: #FBE893;
					letter-spacing: 0.15rpx;
				}
			}
		}
	}

	.movableArea {
		width: 710rpx;
		position :relative;
		.midden-view {
			width: 710rpx;
			height: 722rpx ;
			position :relative;
			padding: 23rpx 20rpx 29rpx 20rpx ;
			.image-view {
				position :relative;
				width :670rpx;
				height: 670rpx;
				// width :580rpx;
				// height: 580rpx;
				// top: 45rpx;
				// left: 45rpx;
				.img-bg {
					position :absolute;

					width: 100%; height :100%; display :block;
				}

				.line-bg {
					position :absolute;
					width :580rpx;
					height: 580rpx;
					top: 45rpx;
					left: 45rpx;
					// width :100%;
					// height: 100%;
					display :block;
				}
			}

		}

		.bottom-view {
			width :710rpx;
			height: 270rpx;
			margin-top :10rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.lianjie {
				position: absolute ;left: 20rpx;
				top :-35rpx; height: 60rpx;
				width: 678rpx;
				z-index :100;
			}

			.num-view {
				background: #C6784A;
				border-radius: 20rpx;
				margin-top: 20rpx; font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #FBE893;
				letter-spacing: 0.14rpx;
				// line-height 40rpx
				// padding 5rpx 10rpx
				min-width :100rpx; min-height :40rpx; text-align: center;
			}
			.chips-area{
				position: absolute;
				left:20rpx;
				top: 80rpx;
				width: 670rpx;
				height: 160rpx;
				display: flex;
				.last,.next{
					width: 67rpx;
					height: 160rpx;
					z-index: 99;
					align-items: center;
					display: flex;
					align-items: center;
					.btn-icon{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.last{
					.btn-icon{
						margin-right: 10rpx;
					}
				}
				.next{
					text-align: right;
					.btn-icon{
						margin-left: 10rpx;
					}
				}
				.chips-content {
					flex: 1;
					height: 160rpx;
					display: flex;
					justify-content: flex-start;
					.chip-item {
						width: 160rpx;
						height: 160rpx;
						flex-shrink: 0;
						display: block;
						&:first-child{
							margin-left: -10rpx;
						}
						&:nth-child(2) {
							margin-left: auto;
						}
						&:last-child{
							margin-left: auto;
							margin-right: -10rpx;
						}
						&.hasBkg{
							background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
							border: 4rpx solid #E8A974;
							border-radius: 26rpx;
						}
					}
				}
			}

		}

		.movable-area-bg {
			position: absolute;
			left: 20rpx;
			top: 23rpx;
			width: 670rpx ;
			height: 960rpx;
			// height: 670rpx;
			// background-image: url('https://captern.cn/img-renwu-sjlgz.png');
			// background-size: 100% 100%;
			// background-repeat: no-repeat;
			.moveView {
				z-index: 100; width: 134rpx; height: 134rpx;
				.movable-view-item {
					position: relative; background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
					border: 2rpx solid #E8A974;
					display: flex; justify-content: center ;align-items :center; border-radius: 13rpx;

					width :134rpx; height: 134rpx;>image {
						width :80%;
						height: 80%;
						display :block;
					}

					.img-small {
						width :100%;
						height: 100%;
						display: block;
					}
				}

				.isLongpress {
					background-image: none ;border:none;
				}
			}

			.isDisable {
				background-image: none; border:none ;z-index: 50;
			}
		}


	}




	.open-treasure-box {
		display: flex ;flex-direction :column; // justify-content center

		align-items: center ;background-color: rgba(0, 0, 0, 0) ;width: 665rpx ;height: 100vh; position: relative; .opne-bg-1 {
			position :absolute;
			left: 0;
			top :0;
			width: 100%;
			height: 100%;
			display: block;
		}

		.opne-bg-2 {
			position: relative; width :502rpx; height :502rpx ;margin-top: 20vh ;display: block;
		}

		.opne-bg-3 {
			width: 430rpx; height: 280rpx; display: block;
			position :absolute ;left: 50%; top: 32vh ;transform: translateX(-50%);
		}

		.opne-bg-4 {
			width :486rpx; height :174rpx; display: block;
			position :absolute; left: 50% ;top: 32vh ;transform :translateX(-50%);
		}

		.opne-bg-5 {
			width :370rpx ;height :146rpx; display :block;
			position :absolute; left :50%; top: 32vh ;transform: translateX(-50%);
		}

		.btn-get-key {
			width :420rpx ;height :130rpx; margin-top :200rpx;>image {
				position: absolute;
				left :0;
				top: 0;
				width: 100%;
				height: 100%;
				display: block
			}

			>view {
				display: flex; justify-content: center; align-items :center;>image {
					width: 48rpx;
					height :48rpx;
					display: block; margin-right: 16rpx;
				}

				>text {
					position :relative; font-family: PingFangSC-Semibold;
					font-size: 36rpx;
					color: #FFFFFF;
					letter-spacing: 5.54rpx;
				}
			}

		}
	}

	.opened {
		display: flex; flex-direction :column ;justify-content :flex-start ;align-items :center; background-color: rgba(0, 0, 0, 0) ;width :680rpx ;height :980rpx ;position :relative ;.opened-bg {
			position :absolute ;left: 0;
			top :0;
			width :100%;
			height :100%
		}

		.opened-status-img {
			margin-top :290rpx; width :540rpx; height :300rpx; display :block;
		}

		// .opened-status-status {
		// 	position: relative; min-height :120rpx; display :flex; align-items :center; justify-content :center;>text {
		// 		font-family: PingFangSC-Semibold;
		// 		width: 500rpx ;font-size: 28rpx;
		// 		color: #844425;
		// 		letter-spacing: 0.14rpx;
		// 		line-height :36rpx; text-align :left;
		// 	}
		// }
		.opened-status-desc-area {
			.opened-status-status {
				position: relative;
				min-height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30px;
				&>text {
					font-family: PingFangSC-Semibold;
					width: 500rpx;
					font-size: 28rpx;
					color: #844425;
					letter-spacing: 0.14rpx;
					line-height: 36rpx;
					text-align: left;
				}
			}

			&.has-desc {
				.opened-status-status {
					min-height: 78rpx;
					margin-bottom: 0;
				}

				.opened-status-desc {
					position: relative;
					background: #F4F5CB;
					border-radius: 12px;
					font-family: PingFangSC-Regular;
					font-size: 11px;
					color: #844425;
					letter-spacing: 0;
					text-align: center;
					padding: 8.5px 16px;
					margin-top: 6px;
					width: 500rpx;
				}
			}
		}


		.btn-next {
			width: 350rpx;
			 height: 130rpx;
			  position: relative;
			   margin-top: 30rpx;
			   >image {
				position: absolute; left: 0; top: 0; width: 100% ;height: 100%;display: block;
			}

			>text {
				position :relative;font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #FFFFFF;
				letter-spacing: 5.54rpx;
			}
		}
	}
	.btn-open{
		margin-top:20rpx;
		width :350rpx;
		height:130rpx;
		position :fixed;
		left :50%;
		bottom :90rpx;
		transform :translateX(-50%);
		image{
			position :absolute;
			left :0;
			top :0;
			width :100%;
			height :100%;
			display :block
		}
		text{
			position :relative;
			font-family: PingFangSC-Semibold;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 5.544px;
			line-height: 130rpx;
		}
	}
}
